<template>
  <div class="">
    <div v-for="(dataListItem, index) in dataList" class="card-view _p-20" :key="index">
      <div class="disFlxAC _mt-20" style="align-items: start;">
        <h6 class="_mr-20" style="margin-bottom: 0;font-weight: bolder;">{{ dataListItem.name }}</h6>
        <a-select
          :value="getManagerList(dataListItem.sysUserList)"
          mode="multiple"
          style="width: 400px"
          placeholder="请选择"
          :filter-option="filterOption"
          @select="e => handleSelect(e, dataListItem)"
          @deselect="e => handleDeselect(e, dataListItem)"
        >
          <a-select-option v-for="item in user_list" :key="item.userId">{{ item.userName }}</a-select-option>
        </a-select>
      </div>
      <p class="_mt-8" style="white-space: pre-line;">{{ dataListItem.details }}</p>
    </div>
    <div class="disFlxCC _mt-20">
      <a-button type="primary" size="large" style="width: 200px" @click="handleTenantSave">保存设置</a-button>
    </div>
  </div>
</template>

<script>
import { getBoPlatformTypeConfigList, boPlatformTypeConfigAddOrUpdate } from '@/api/business/source'
import { getUserList } from '@/api/system/system'

export default {
  components: {},
  data() {
    return {
      /** 管理员列表 */
      user_list: [],
      dataList: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getManagerList(sysUserList) {
      return sysUserList.map(item => item.sysUserId)
    },
    async GetUserList() {
      let res = await getUserList()
      this.user_list = res.rows || []
    },
    async handleSelect(id, dataListItem) {
      const user = this.user_list.find(f => f.userId === id)
      dataListItem.sysUserList.push({ sysUserId: user.userId, sysUserName: user.userName })
    },
    async handleDeselect(id, dataListItem) {
      dataListItem.sysUserList = dataListItem.sysUserList.filter(f => f.sysUserId !== id)
    },
    async handleTenantSave() {
      await boPlatformTypeConfigAddOrUpdate(this.dataList)
      this.$message.success('保存成功')
    }
  },
  async created() {
    this.GetUserList()
    const res = await getBoPlatformTypeConfigList()
    this.dataList = res.data || []
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.card-view {
  background-color: #f7f8fa;
  margin-bottom: 24px;
}

.tips {
  color: rgb(108, 108, 108);
  font-size: 14px;
}
</style>
